<template>
  <div>
    <sys-dialog
      :title="assignDialog.title"
      :height="assignDialog.height"
      :width="assignDialog.width"
      :visible="assignDialog.visible"
      @onClose="onAssignClose"
      @onConfirm="onAssignConfirm">
      <div slot="content">
        <el-tree
          ref="assignTree"
          :data="assignTreeData"
          node-key="id"
          :props="defaultProps"
          empty-text="暂无事数据"
          :show-checkbox="true"
          :highlight-current="true"
          default-expand-all
          @node-click="handleNodeClick"
          :default-checked-keys="assignTreeChecked"></el-tree>
      </div>
    </sys-dialog>
  </div>
</template>

<script>
import SysDialog from '@/components/system/SysDialog'
import { assignSaveApi, getAssignTreeApi } from '@/api/role'
export default {
  components: {
    SysDialog
  },
  data() {
    return {
      //树属性配置
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      //分配权限弹框属性
      assignDialog: {
        title: '',
        height: 450,
        width: 300,
        visible: false
      },
      //分配权限树数据域
      assignTreeData: [],
      // 回显的id集合
      assignTreeChecked: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    async show(row) {
      this.roleId = row.id
      let parm = {
        roleId: row.id,
        userId: this.$store.getters.userId
      }
      let res = await getAssignTreeApi(parm)
      console.log('获取分配权限的树', res)
      if (res && res.code === 200) {
        // 当前登录用户搜拥有的所有权限
        let menuList = res.data.listmenu
        // 当前被分配的角色所拥有的权限id集合，包括父级和子级的全部节点
        // 我们只需要子级节点的id，这里就需要我们自己处理数据
        let selectIds = res.data.checkList
        // 把局部引用改为全文件的引用
        // let newMenuList = setLeaf(menuList)
        this.assignTreeData = menuList
        // console.log(newMenuList)
        if (selectIds && selectIds.length > 0) {
          let newArr = []
          // 这里因为循环套用的层数太多，可以进行拆分
          // 分解为几个不同的函数来进行循环调用就可以了
          // 这个步骤的目的就是从后端返回的全部id中得到最后一级的id
          selectIds.forEach((item) => {
            this.checked(item, menuList, newArr)
          })
          this.assignTreeChecked = newArr
        }
      }
      this.assignDialog.visible = true
      this.assignDialog.title = '为【' + row.name + '】分配权限'
    },
    // 分配对话框
    //树的节点点击事件
    handleNodeClick(data) {
      console.log(data)
    },
    //分配权限确认事件
    async onAssignConfirm() {
      // 这个是自己选中的选择框的id,不包括父级的
      // let ids = this.$refs.assignTree.getCheckedKeys()
      // console.log('自己选中的选择框的id', ids)
      // // 这个是自己选中的元素的父级的id,不包括子级的
      // let idss = this.$refs.assignTree.getHalfCheckedKeys()
      // console.log('选中的元素的父级的id', idss)
      // 所以需要把这两个id连起来
      let listId = this.$refs.assignTree
        .getCheckedKeys()
        .concat(this.$refs.assignTree.getHalfCheckedKeys())
      // console.log(listId)
      let parm = {
        roleId: this.roleId,
        list: listId
      }
      let res = await assignSaveApi(parm)
      if (res && res.code === 200) {
        this.assignDialog.visible = false
        this.$message.success(res.msg)
      }
    },
    //分配权限取消事件
    onAssignClose() {
      this.assignDialog.visible = false
    },
    // 检查所有的id，把最后一级的id值放入id集合中
    //
    checked(id, newMenuList, newArr) {
      newMenuList.forEach((item) => {
        if (item.children && item.children.length > 0) {
          this.checked(id, item.children, newArr)
        } else {
          if (item.id === id) {
            newArr.push(item.id)
          }
        }
      })
    }
  }
}
</script>
<style lang="less" scoped></style>
